<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" href="/layui/css/layui.css" />
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>app用户列表</title>
</head>
<body>
	<script src="/plugins/jquery/jquery-1.10.2.min.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/plugins/js/common.js"></script>
	<form class="layui-form">
		<!--     <label class="layui-form-label">所属区域</label> -->
		<!--     <div class="layui-input-inline"> -->
		<!--     	<input type="hidden" name="areaCode" id="areaCode"> -->
		<!--         <input type="text" id="loginName" autocomplete="off" readonly="readonly" onclick="showTree();" placeholder="请选择区域" class="layui-input"> -->
		<!--     </div> -->


		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">手机号</label>
				<div class="layui-input-inline">
					<input type="text" name="mobile" id="mobile" autocomplete="off"
						placeholder="请输入手机号" class="layui-input">
				</div>
			</div>
<!-- 			<div class="layui-inline"> -->
<!-- 				<label class="layui-form-label">所属区域</label> -->
<!-- 				<input type="hidden" name="areaCode" id="areaCode"> -->
<!-- 				<div class="layui-input-inline"> -->
<!-- 					<input type="text" id="areaName" autocomplete="off" readonly="readonly" onclick="showTree();" placeholder="请选择区域" class="layui-input"> -->
<!-- 				</div> -->
<!-- 			</div> -->
			<div class="layui-inline">
			<button class="layui-btn" data-type="reload" id="searchButton"
				onclick="return search();">搜索</button>
		</div>
		</div>
		<div style="margin-left: 5px;">
			<br>
			<!-- 	          <button class="layui-btn layuiadmin-btn-replys" onclick="return updateUserType(3,2);" >设置为地市推广代理</button>&nbsp; -->
			<button class="layui-btn layuiadmin-btn-replys"
				onclick="return toAppUserDetail();">查看用户详情</button>
		</div>
	</form>
	<table class="layui-hide" id="appUserList" lay-filter="appUserList"></table>
	<script type="text/html" id="userBarAction">
  <a class="layui-btn layui-btn-xs" lay-event="edit">解锁</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">锁定</a>
</script>
	<script type="text/javascript">
		var table;
		var layer;
		layui.use([ 'table' ], function() {
			layer = layui.layer;
			table = layui.table;
			tableIns = initTable(table);
			//监听行工具事件
			table.on('tool(appUserList)', function(obj) {

				var data = obj.data;
				if (obj.event === 'del') {
					if (data.state == 2) {
						layMsg("该用户已锁定，请不要重复操作", 2000);
						return;
					}
					updateAppUserState(2, data.id);
				} else if (obj.event === 'edit') {
					if (data.state == 1) {
						layMsg("该用户状态是正常，请不要重复操作", 2000);
						return;
					}
					updateAppUserState(1, data.id);
				}
			});

		});

		function updateAppUserState(state, id) {
			var msg = (state == 1 ? "确认要解锁该用户吗？" : "确认要锁定该用户吗？")
			layer.confirm(msg, {
				btn : [ '确认', '取消' ]
			//按钮
			}, function() {
				var result = ajaxAction('/appUser/updateAppUserInfo', {
					id : id,
					state : state
				});
				if (result) {
					search("操作成功");
				} else {
					search("操作失败");
				}
			});
		}

		function initTable() {
			table.render({
				elem : '#appUserList',
				url : '/appUser/listData',
				cellMinWidth : 50,
				cols : [ [ {
					type : 'checkbox',
					field : 'id'
				}, {
					field : 'loginName',
					title : '登录名'
				}
				,{
					field : 'realName',
					title : '真实姓名'
				},{
					field : 'mobile',
					title : '手机号'
				},
				{
					field : 'allAreaInfoName',
					title : '所属区域'
				},
				{
					field : 'appUserType',
					title : '用户类型',
					templet : function(value) {
						if (value.appUserType == 1) {
							return "普通用户";
						} else if (value.appUserType == 2) {
							return "VIP会员";
						} else {
							return "地市推广代理";
						}
					}
				},
				{
					field : 'createDate',
					title : '注册时间',
					sort : true,
					fixed : false,
					templet : '<div>{{ formatDate(d.createDate)}}</div>'
				}, {
					field : 'state',
					title : '用户状态',
					templet : function(value) {
						if (value.state == 1) {
							return "正常";
						} else {
							return "锁定";
						}
					}
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#userBarAction'
				} ] ],
				page : true,
				limit : 8,
				where : {
					'mobile' : $("#mobile").val(),
					'areaCode': $("#areaCode").val()
				},
				id : 'reloadTable'
			});
		}

		function search(sender) {
			var mobile = $('#mobile');
			//执行重载
			table.reload('reloadTable', {
				page : {
					curr : 1
				//重新从第 1 页开始
				},
				where : {
					mobile : mobile.val(),
					'areaCode': $("#areaCode").val()
				}
			});
			if (!isNull(sender)) {
				layMsg(sender, 2000);
			}
			return false;
		}

		function updateUserType(newAppUserType, oldAppUserType) {
			var checkList = table.checkStatus('reloadTable').data;
			if (checkList.length == 0) {
				layMsg("请至少选择一条数据", 2000);
				return false;
			}
			var msg = (newAppUserType == 2 ? "确认要恢复地市推广代理为普通会员吗？"
					: "确认要设置为地市推广代理吗？")
			layer.confirm(msg, {
				btn : [ '确认', '取消' ]
			//按钮
			}, function() {
				var ids = "";
				for (var i = 0; i < checkList.length; i++) {
					if (checkList[i].appUserType != oldAppUserType) {
						layer.alert("操作失败，存在用户类型为"
								+ (oldAppUserType == 2 ? "非会员" : "非地市推广代理")
								+ "的数据");
						return false;
					}
					if (i > 0) {
						ids += ",";
					}
					ids += checkList[i].id;
				}
				var result = ajaxAction('/appUser/updateAppUserType', {
					ids : ids,
					appUserType : newAppUserType
				});
				if (result) {
					search("操作成功");
				} else {
					layMsg("操作失败", 2000);
				}
			});
			return false;
		}

		function toAppUserDetail() {
			var checkList = table.checkStatus('reloadTable').data;
			if (checkList.length == 0 || checkList.length > 1) {
				layMsg("请选择一条数据", 2000);
				return false;
			}
			var id = checkList[0].id;
			perContent = layer.open({
				type : 2,
				title : "APP用户详情",
				content : '/appUser/toAppUserDetail?id=' + id,
				area : [ '700px', '420px' ],
				maxmin : true, //最大化按钮
				anim : 3, //动画
				shade : [ 0.8, '#393D49' ],//遮罩层
				end : function() {
				}
			});
			layer.full(perContent);
			return false;
		}
		
		
		function sendSms() {
			var checkList = table.checkStatus('reloadTable').data;
			if (checkList.length == 0) {
				layMsg("请选择一条数据", 2000);
				return false;
			}
			var msg="";
			layer.confirm(msg, {
				btn : [ '确认发送', '取消' ]
			//按钮
			}, function() {
				var ids = "";
				for (var i = 0; i < checkList.length; i++) {
					if (checkList[i].appUserType != oldAppUserType) {
						layer.alert("操作失败，存在用户类型为"
								+ (oldAppUserType == 2 ? "非会员" : "非地市推广代理")
								+ "的数据");
						return false;
					}
					if (i > 0) {
						ids += ",";
					}
					ids += checkList[i].id;
				}
				var result = ajaxAction('/appUser/updateAppUserType', {
					ids : ids,
					appUserType : newAppUserType
				});
				if (result) {
					search("操作成功");
				} else {
					layMsg("操作失败", 2000);
				}
			});
			var ids='';
			for(var i = 0;i<checkList.length;i++){
				if(i>0){
					ids+=',';
				}
				ids+=checkList[i].id;
			}
// 			perContent = layer.open({
// 				type : 2,
// 				title : "APP用户详情",
// 				content : '/appUser/toAppUserDetail?id=' + id,
// 				area : [ '700px', '420px' ],
// 				maxmin : true, //最大化按钮
// 				anim : 3, //动画
// 				shade : [ 0.8, '#393D49' ],//遮罩层
// 				end : function() {
// 				}
// 			});
			layer.full(perContent);
			return false;
		}

		/**
			区域树展示
		 **/
		function showTree() {
			layer.open({
				title : "区域选择",
				type : 2,
				skin : 'layui-layer-rim', //加上边框
				area : [ '300px', '350px' ], //宽高
				content : '/area/toAreaTree'
			});
		}
	</script>
	<style>
.layui-table-cell {
	height: 23px;
	line-height: 23px;
}
</style>
</body>
</html>